﻿<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>混入</title>
		
        <script src="../vue.js"></script>

<style>
    .example-7-color-preview {
        display: inline-block;
        width: 50px;
        height: 50px;
    }
</style>

    </head>
    <body class="docs">
    混入 — Vue.js<br />
    https://cn.vuejs.org/v2/guide/mixins.html<br />
    <div id="animated-number-demo">


    </div>
    </body>
	
<script type="text/javascript">
    var mixin = {
        data: function () {
            return {
                message: 'hello',
                abc: 'abc'
            }
        },
        created: function () {
            console.log('混入对象的钩子被调用')
        },
        methods: {
            foo: function () {
                console.log('foo')
            },
            conflicting: function () {
                console.log('from mixin')
            }
        }
    }

    var vm = new Vue({
        el: '#animated-number-demo',
        mixins: [mixin],
        data: function () {
            return {
                message: 'goodbye',
                def: 'def'
            }
        },
        created: function () {
            console.log('组件钩子被调用')
        },
        methods: {
            bar: function () {
                console.log('bar')
            },
            conflicting: function () {
                console.log('from self')
            }
        }
    })
</script>
	
</html>
